﻿<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简历列表</title>
    <!-- 引入Vue 3 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@3.3.4/dist/vue.global.min.js"></script>
    <!-- 引入Element Plus -->
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
    <script src="https://unpkg.com/element-plus/dist/index.full.min.js"></script>
    <!-- 引入axios -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

    <style scoped>
        .resume-list-container {
            padding: 20px;
        }

        .toolbar {
            margin-bottom: 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .table-container {
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div id="app" class="resume-list-container">
        <div class="toolbar">
            <h3 style="font-weight: 600; color: #303133;">面试筛选</h3>
            <el-button type="primary" v-on:click ="refreshData">
                <el-icon><refresh /></el-icon>刷新
            </el-button>
        </div>

        <!-- 简历表格区域 -->
        <div class="table-container">
            <el-table :data="tableData" style="width: 100%" :loading="tableLoading">
                <el-table-column prop="human_name" label="候选人姓名" min-width="120"></el-table-column>
                <el-table-column prop="human_major_kind_name" label="职位分类" min-width="150"></el-table-column>
                <el-table-column prop="human_major_name" label="职位名称" min-width="150"></el-table-column>
                <el-table-column prop="interview_amount" label="面试次数" min-width="100" align="center"></el-table-column>
                <el-table-column prop="registe_time" label="面试时间" min-width="180" align="center"></el-table-column>
                <el-table-column prop="multi_quality_degree" label="综合素质" min-width="120" align="center">
                    <template #default="scope">
                        <el-tag :type="getTagType(scope.row.multi_quality_degree)">{{ scope.row.multi_quality_degree }}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="操作" min-width="120" align="center">
                    <template #default="scope">
                        <el-button type="link" v-on:click="Update(scope.row)">筛选</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <!-- 数据统计 -->
            <div style="padding: 15px; text-align: right; color: #606266;">
                共 <span style="font-weight: bold; color: #303133;">{{ total }}</span> 条记录
            </div>
        </div>
    </div>

    <script type="text/javascript">
        const { createApp, ref, onMounted } = Vue;
        const { ElMessage, ElMessageBox } = ElementPlus;

        const app = createApp({
            setup() {
                // 表格数据
                const tableData = ref([]);
                const tableLoading = ref(false);
                const total = ref(0);

                // 生命周期钩子：组件挂载后获取简历列表
                onMounted(() => {
                    refreshData();
                });
                 const form = ref({
                    human_major_kind_id: '',
                    human_major_kind_name: '',
                    human_major_id: '',
                    human_major_name: '',
                    primaryKey: '',
                    startDate: '',
                    endDate: '',
                    checkStatus: false

                });
                // 刷新数据
                const refreshData = async () => {
                    tableLoading.value = true;

                    try {
                        // 发送API请求，不带分页参数
                        const response = await axios.get('/engage/cx');

                        if (response.status === 200) {
                            // 处理返回数据
                            tableData.value = response.data || [];
                            total.value = response.data?.length || 0;
                            ElMessage.success(`加载成功，共 ${total.value} 条记录`);
                        } else {
                            throw new Error(response.data?.message || '查询失败');
                        }
                    } catch (error) {
                        console.error('加载数据失败:', error);
                        ElMessage.error(error.message || '加载数据失败，请重试');
                    } finally {
                        tableLoading.value = false;
                    }
                };

                // 获取标签类型
                const getTagType = (quality) => {
                    switch(quality) {
                        case '优秀': return 'success';
                        case '良好': return 'primary';
                        case '一般': return 'warning';
                        default: return '';
                    }
                };
                function Update(form){
                    console.log("发送的数据:", form);
            // 序列化并编码数据
            const encodedData = encodeURIComponent(JSON.stringify(form));

            // 生成目标URL
            const baseUrl = '@Url.Action("Index", "engage")';
            const urlWithParams = `${baseUrl}?data=${encodedData}`;

            console.log("目标URL:", urlWithParams);
            window.location.href = urlWithParams;
                }
               

                return {
                    tableData,
                    tableLoading,
                    total,
                    refreshData,
                    getTagType,
                    Update
                };
            }
        });

        app.use(ElementPlus);
        app.mount('#app');
    </script>
</body>
</html>